/*
 * @Description: 添加用户弹窗
 * @Author: Rfan
 * @Date: 2022-04-07 14:49:49
 * @LastEditTime: 2022-04-07 15:54:16
 */

import { useCallback, useEffect } from 'react';
import { Button, Modal, Tabs } from 'antd';
// import ConditionWrap from './components/ConditionWrap';
// import OperateWrap from './components/OperateWrap';
// import { AddRuleContextProvider, useAddRuleContext } from './contexts/AddRuleContext';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import GroupPane from './components/GroupPane';

const { TabPane } = Tabs;

interface IAddUserDialogProps extends ICommonDialog {}

const AddUserDialogComp: FC<IAddUserDialogProps> = (props) => {
  console.log('AddUserDialogComp', props.visible);

  const { visible: dialogVisible, onClose } = props;
  // const { visible, hideDialog, showDialog } = useAddRuleContext();

  const memoizedClose = useCallback(() => onClose(), []);

  useEffect(() => {
    console.log('effect visible', dialogVisible);

    if (dialogVisible) {
      // showDialog();
    }
  }, [dialogVisible]);

  const onCancel = () => {
    // hideDialog();
    memoizedClose();
  };

  return (
    <Modal
      title="选择人员"
      visible={dialogVisible}
      width={600}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          取消
        </Button>,
        <Button key="save" type="primary" onClick={onCancel}>
          确认
        </Button>
      ]}
    >
      <Tabs defaultActiveKey="1">
        <TabPane tab="按组织选择" key="1">
          <GroupPane />
        </TabPane>
        <TabPane tab="按组织内成员选择" key="2">
          Content of Tab Pane 2
        </TabPane>
      </Tabs>
    </Modal>
  );
};

const AddUserDialog = (props: any) => <AddUserDialogComp {...props} />;

export default AddUserDialog;
